<template>
	<div class="data_detail_wrapper">
		<div class="item">
			<div class="label">课题名称：</div>
			<div class="content">{{ data.name }}</div>
		</div>
		<div class="item">
			<div class="label">课题编号：</div>
			<div class="content">{{ data.filed1 }}</div>
		</div>
		<div class="item">
			<div class="label">课题类型：</div>
			<div class="content">{{ projectTypeName(data) }}</div>
		</div>
		<div class="item">
			<div class="label">研究领域：</div>
			<div class="content">{{ data.sector }}</div>
		</div>
		<div class="item" v-if="!!data.filed4">
			<div class="label">二级领域：</div>
			<div class="content">{{ data.filed4 }}</div>
		</div>
		<div class="item">
			<div class="label">测量技术：</div>
			<div class="content">
				<p class="sep" v-for="(item, index) in data.measureList" :key="index">
					<span>{{ item }}</span>
				</p>
			</div>
		</div>
		<div class="item">
			<div class="label">强磁场PI：</div>
			<div class="content">
				<p class="sep" v-for="(item, index) in coagentNameData" :key="index">
					<span>{{ item }}</span>
				</p>
			</div>
		</div>
		<div class="item">
			<div class="label">申请人：</div>
			<el-table :data="data.responsible" size="medium" class="index_table_wrapper">
				<el-table-column type="index" label="NO." width="56"></el-table-column>
				<el-table-column prop="userName" label="姓名" min-width="160"></el-table-column>
				<el-table-column prop="filed2" label="单位" min-width="200"></el-table-column>
				<el-table-column prop="account" label="邮件地址" min-width="240"></el-table-column>
				<el-table-column prop="phone" label="电话" min-width="150"></el-table-column>
			</el-table>
		</div>
		<!-- <div class="item">
			<div class="label">联系方式：</div>
			<div class="content">{{ data.createName }}</div>
		</div>
		<div class="item">
			<div class="label">邮件地址：</div>
			<div class="content">{{ data.createName }}</div>
		</div> -->
		<div class="item">
			<div class="label">合作者：</div>
			<el-table :data="data.collaList" size="medium" class="index_table_wrapper">
				<el-table-column type="index" label="NO." width="56"></el-table-column>
				<el-table-column label="参与方式" :formatter="formatModeType"></el-table-column>
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="dept" label="单位"></el-table-column>
				<el-table-column prop="position" label="职称"></el-table-column>
				<el-table-column prop="role" label="角色"></el-table-column>
			</el-table>
		</div>
		<div class="item">
			<div class="label">相关经费信息：</div>
			<el-table :data="data.fundsList" size="medium" class="index_table_wrapper">
				<el-table-column type="index" label="NO." width="56"></el-table-column>
				<el-table-column label="经费类型" :formatter="formatFundType"></el-table-column>
				<el-table-column prop="name" label="标题"></el-table-column>
				<el-table-column prop="fno" label="经费号"></el-table-column>
				<el-table-column prop="quota" label="总额度"></el-table-column>
			</el-table>
		</div>
		<div class="item">
			<div class="label">课题申请文件：</div>
			<div class="content">
				<template v-for="(item, index) in applyFileData">
					<el-button type="text" class="down" @click="handleDownloadFile(item)">{{ item.name }}</el-button>
				</template>
			</div>
		</div>
		<div class="item" v-if="!!data.filed5">
			<div class="label">课题签名：</div>
			<div class="content">
				<el-button type="text" class="sign" @click="handleLookSign()">查看签名</el-button>
			</div>
		</div>
		<sw-image-viewer class="preview_container" v-if="imgVisible" :on-close="handlePreviewClose" :url-list="imgList"></sw-image-viewer>
	</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import swImageViewer from 'element-ui/packages/image/src/image-viewer';
export default {
	components: { swImageViewer },
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			imgVisible: false,
			imgList: []
		};
	},
	computed: {
		...mapGetters(['dictEnums', 'siteConfig', 'principalData']),
		applyFileData() {
			return !this.data.fileJson ? [] : JSON.parse(this.data.fileJson);
		},
		coagentNameData() {
			let piList = this.data.piList || [];
			return piList.map((item) => {
				let info = this.principalData.find((n) => n.id === item);
				return !info ? '' : info.userName;
			});
		}
	},
	methods: {
		...mapActions(['getFileUrl']),

		//课题类型
		projectTypeName(data) {
			let info = this.dictEnums['PROJECT_TYPE'].find((n) => n.value === data.type);
			return !info ? '' : info.msg;
		},

		//格式化费用类型
		formatFundType(data) {
			let info = this.dictEnums['FUND_TYPE'].find((n) => n.value === data.type);
			return !info ? '' : info.msg;
		},

		//格式化参与方式
		formatModeType(data) {
			let info = this.dictEnums['PARTICIPATE_WAY'].find((n) => n.value === data.modeType);
			return !info ? '' : info.msg;
		},

		//查看签名
		async handleLookSign() {
			if (!!this.data.filed5) {
				let result = await this.getFileUrl(this.data.filed5);
				this.imgList = [result];
				this.imgVisible = true;
			} else {
				this.$showCustomMessage('warning', `暂无签名`);
			}
		},

		//关闭签名预览
		handlePreviewClose() {
			this.imgVisible = false;
		},

		//下载文件
		handleDownloadFile(data) {
			let fileUrl = data.url;
			let suffix = fileUrl.split('.');
			let name = `${data.name}.${data.suffix || suffix[suffix.length - 1]}`;
			if (this.data.isSave === '1' && !!this.data.filed5) {
				fileUrl = fileUrl.replace(data.newName, `${data.newName}_name`);
			}
			this.$fileDownload(fileUrl, name);
		}
	}
};
</script>

<style lang="scss">
.preview_container {
	.el-image-viewer__btn {
		z-index: 2;
	}

	.el-image-viewer__canvas {
		position: relative;
		z-index: 1;
		background-color: #fff;
	}
}
</style>
